<template>
  <div class="majorDetail">
    <header>
      <div class="container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >生涯规划</el-breadcrumb-item>
          <el-breadcrumb-item>生涯宝库</el-breadcrumb-item>
          <el-breadcrumb-item>专业信息库</el-breadcrumb-item>
          <el-breadcrumb-item>{{majorDetail.majorName}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </header>
    <main>
      <div class="container">
        <div class="mainAside">
          <div class="title">目录详情</div>
          <div class="catalogueBox">
<!-- majorDetail.menuList   -->
            <div
              class="catalogue"
              :class="item.key===key?'checked':''"
              v-for="item in catalogueList"
              :key="item.key"
              @click="jumpDetail(item.key)">
              <img v-show="item.key!==key" :src="catalogueCheck[0].src" alt="">
              <img v-show="item.key===key" :src="catalogueCheck[1].src" alt="">
              <span>{{item.title}}</span>
            </div>
          </div>
        </div>
        <div class="mainBody">
<!--    专业概况      -->
          <div class="majorGeneral box">
            <h3 class="f">{{majorDetail.majorName}}</h3>
            <div class="operation">
              <button class="collect">点击收藏</button>
              <button class="collected">取消收藏</button>
            </div>
            <p>
              <span>所属类别：{{majorDetail.majorClassName}}</span> |
              <span>年限：{{majorDetail.studyDuration}}</span> |
              <span>学位：{{majorDetail.degree}}</span>
            </p>
          </div>
<!--    培养目标      -->
          <div class="trainObjective box">
            <h3>培养目标</h3>
            <div class="trainObjectiveText" v-html="majorDetail.target"></div>
          </div>
<!--    培养要求      -->
          <div class="trainRequire box">
            <h3>培养要求</h3>
            <div class="trainRequireText" v-html="majorDetail.request"></div>
          </div>
<!--    毕业应获能力      -->
          <div class="studentAbility box">
            <h3>毕业应获能力</h3>
            <div class="studentAbilityText" v-html="majorDetail.ability"></div>
          </div>
<!--    开设课程      -->
          <div class="openCourse box">
            <h3>开设课程</h3>
            <div class="openCourseText" v-html="majorDetail.openCourse"></div>
          </div>
<!--    相似专业      -->
          <div class="similarMajor box">
            <h3>相似专业</h3>
            <div class="similarMajorBox">
              <span
                v-for="(item,index) in majorDetail.similarMajors"
                :key="index">
                {{item.majorName}}
                <i v-if="item.videoId>0" class="el-icon-video-play"></i>
              </span>
            </div>
          </div>
<!--    素质能力要求      -->
          <div class="abilityRequire box">
            <h3>素质能力要求</h3>
            <div class="abilityRequireText" v-html="majorDetail.qualityAbilityRequire"></div>
          </div>
<!--    优势院校      -->
          <div class="advantageCollege box">
            <h3>优势院校</h3>
            <div class="advantageCollegeList">
              <div
                class="advantageCollegeBox"
                v-if="majorDetail.advantageColleges.length"
                v-for="(item,index) in majorDetail.advantageColleges"
                :key="index">
                <img :src="item.schoolBadge" alt="">
                <div class="name">{{item.collegeName}}</div>
                <div class="tagList" v-if="item.tagList.length">
                  <i
                    class="tag"
                    v-for="tag in item.tagList"
                    :key="tag.tagCode">
                    {{tag.tagName}}
                  </i>
                </div>
                <div class="address">
                  <i class="el-icon-map-location"></i>
                  <span>{{item.province}}</span>/
                  <span>{{item.city}}</span>
                </div>
                <p>
                  <span class="type">{{item.nature}}</span>
                  <span class="rank">排名：{{item.alumniRank}}</span>
                </p>
              </div>
            </div>
          </div>
<!--    就业方向      -->
          <div class="jobDirection box">
            <h3>就业方向</h3>
            <div class="jobDirectionText" v-html="majorDetail.employment"></div>
          </div>
<!--    就业前景      -->
          <div class="trainRequire box">
            <h3>就业前景</h3>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
    import { majorClassList, majorTree, majorDetails, majorJob, searchHotWord, searchMajor } from '../../../api/bank/major'
    export default {
        name: "majorDetail",
        data() {
            return {
                majorId: 1,
                majorDetail: {},
                key: 'overview',
                catalogueList: [
                    {key: "overview", title: "专业概况"},
                    {key: "target", title: "培养目标"},
                    {key: "request", title: "培养要求"},
                    {key: "ability", title: "毕业应获能力"},
                    {key: "openCourse", title: "开设课程"},
                    {key: "similarMajors", title: "相近专业"},
                    {key: "qualityAbilityRequire", title: "素质能力要求"},
                    {key: "employment", title: "就业方向"},
                    {key: "prospects", title: "就业前景"},
                ],  // 目录
                catalogueCheck: [
                    {src: require('../../../assets/img/nocheck.png')},
                    {src: require('../../../assets/img/check.png')},
                ],
            }
        },
        created() {
            this.majorId = this.$route.query.majorId;
            this.majorDetails();
            this.getElementOffsetTop();
        },
        methods: {
            // 获取元素距离顶部高度
            getElementOffsetTop() {
                const boxes = document.getElementsByClassName('box');
                console.log(boxes);
            },
            async majorDetails() {
                const res = await majorDetails({
                    'majorId': this.majorId
                });
                if(res.data.status) {
                    console.log(res.data.data);
                    this.majorDetail = res.data.data;
                }
            },
            // 点击目录，跳转
            jumpDetail(key) {
                this.key = key;
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../styles/common.scss';
  .majorDetail{
    header{
      padding: 14px 0;
      /*background-color: #f5f5f5;*/
    }
    main{
      .container{
        min-height: 300px;
        display: flex;
        justify-content: space-between;
        .mainAside{
          width: 18%;
          .title{
            background-color: #f5f5f5;
            padding: 10px 20px;
            margin-bottom: 10px;
            font-size: 1.2rem;
            font-weight: bold;
          }
          .catalogueBox{
            background-color: #f5f5f5;
            margin-bottom: 20px;
            padding-bottom: 30px;
            .catalogue{
              padding: 6px 0;
              img{
                width: 10px;
                margin-left: 10px;
              }
              span{
                font-size: 1rem;
                cursor: pointer;
                padding: 2px 8px;
              }
            }
            .catalogue.checked{
              color: #2f8efa;
            }
          }
        }
        .mainBody{
          width: 80%;
          background-color: #f5f5f5;
          div.box{
            border-bottom: 1px dotted #ddd;
            padding: 10px 0;
            margin: 10px;
            min-height: 200px;
            h3{
              font-size: 1.1rem;
              margin-bottom: 10px;
            }
          }
          // 专业概况
          div.majorGeneral{
            position: relative;
            h3.f{
              font-size: 1.5rem;
            }
            .operation{
              position: absolute;
              top: 20px;
              right: 30px;
              padding: 6px 10px;
              button.collect{
                border-radius: 10px;
                border: 1px solid #2e86ff;
                color: #2e86ff;
                cursor: pointer;
                padding: 1px 6px;
                margin: 0 4px;
              }
              button.collected{
                border-radius: 10px;
                border: none;
                cursor: pointer;
                background-color: #eee;
                padding: 1px 6px;
                color: #999;
              }
            }
            p{
              margin-top: 10px;
              color: #666;
              span{
                display: inline-block;
                margin: 0 10px;
                color: #000;
              }
              span:first-child{
                margin-left: 0;
              }
            }
          }
          // 优势院校
          div.advantageCollege{
            margin: 0;
            padding: 0;
            h3{
              margin-left: 10px;
            }
            .advantageCollegeList{
              display: flex;
              flex-wrap: wrap;
              justify-content: left;
              .advantageCollegeBox{
                cursor: pointer;
                box-shadow: 0 1px 8px 4px #ddd;
                border-radius: 4px;
                padding: 16px 8px;
                width: 21%;
                margin: 10px 1%;
                text-align: center;
                background-color: #fff;
                img{
                  height: 60px;
                }
                .name{
                  font-size: 1rem;
                  margin: 4px 0;
                }
                .tagList{
                  min-height: 48px;
                  margin: 4px 0;
                  i.tag{
                    display: inline-block;
                    background-color: #589eff;
                    color: #fff;
                    padding: 2px 4px;
                    font-style: normal;
                    margin: 2px;
                    border-radius: 2px;
                    font-size: 0.6rem;
                  }
                }
                .address{
                  margin: 4px 0;
                  font-size: 1rem;
                  i{
                    margin-right: 4px;
                  }
                }
                p{
                  display: flex;
                  justify-content: center;
                  .type,.rank{
                    margin: 4px 14px;
                    font-size: 1rem;
                  }
                }
              }
              .advantageCollegeBox:hover{
                box-shadow: 0 1px 8px 4px #ccc;
              }
            }
          }
        }
      }
    }
  }
</style>